<template>
  <div>
    <div>
      <a-radio-group
        v-model="status"
        size="large"
        @change="statusChange">
        <a-radio-button v-for="(item, index) in statusList" :key="index" :value="item.value">
          {{ item.name }}
          <!-- +'（'+statusListLength[item.key] || 0+'）' -->
        </a-radio-button>
      </a-radio-group>
    </div>

    <search-table
      style="margin-top: 20px;"
      :url="url"
      :headParams="headParams"
      ref="searchtable"
      :columns="columns"
      :form="form">
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="团购编号">
            <a-input allowClear v-decorator="['id']" placeholder="请输入团购编号"></a-input>
            <a-input type="hidden" v-decorator="['groupStatus']"></a-input>
            <a-input type="hidden" v-decorator="['refundStatus']"></a-input>
          </a-form-item>
        </a-form>
      </template>
      <template slot="tableOperation" slot-scope="{ record }">
        <a-space>
          <permission authority="group:activity:info">
            <span
              class="text-primary pointer"
              @click="openInfo(record)"
              >查看</span>
          </permission>
        </a-space>
      </template>
    </search-table>
  </div>
</template>

<script>
import { findDictNameByValue, createOptionsByDict } from '@/utils/dict'
export default {
  name: 'OrderGroupBargaining',
  data() {
    return {
      url: '/group/page',
      headParams: { baseURL: `${location.origin}/goldenhome/ghgroup/admin` },
      currentRecord: {},
      status: '',
      statusList: [
        { value: '', name: '全部', key: '' },
        { value: 'GROUP_RUNNING', name: '拼团中', key: 'GROUP_RUNNING' },
        { value: 'GROUP_SUCCESS', name: '拼团成功', key: 'GROUP_SUCCESS' },
        { value: 'GROUP_FAIL,2', name: '拼团失败（已退款）', key: 'GROUP_FAIL,2' },
        { value: 'GROUP_FAIL,0', name: '拼团失败（未退款）', key: 'GROUP_FAIL,0' }
      ],
      statusListLength: {},
      form: this.$form.createForm(this, {
        name: "table_search",
        mapPropsToFields: () => {
          return {
            groupStatus: this.$form.createFormField({
              value: '',
            }),
            refundStatus: this.$form.createFormField({
              value: '',
            }),
          };
        }
      }),
      columns: [
        {
          title: "团购编号",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "团购商品",
          dataIndex: "goodsName",
          key: "goodsName",
        },
        {
          title: "团长",
          dataIndex: "userName",
          key: "userName",
          customRender: (text, record) => { return text || '-' }
        },
        {
          title: "成团人数",
          dataIndex: "groupActivityCompleteNum",
          key: "groupActivityCompleteNum",
        },
        {
          title: "匿名人数",
          dataIndex: "guestNum",
          key: "guestNum",
        },
        {
          title: "已参人数",
          dataIndex: "joinNum",
          key: "joinNum",
        },
        {
          title: "还差人数",
          dataIndex: "differenceNum",
          key: "differenceNum",
        },
        {
          title: "待付款人数",
          dataIndex: "unPayNum",
          key: "unPayNum",
        },
        {
          title: "拼团时间",
          dataIndex: "startTime",
          key: "startTime",
          customRender: (text, record) => {
            if(record.startTime) {
              return record.startTime + '至' + record.endTime
            } else {
              return '-'
            }
          }
        },
        {
          title: "拼团状态",
          dataIndex: "groupStatus",
          key: "groupStatus",
          customRender: (text, record) => {
            let res = ''
            switch (text) {
              case 'GROUP_RUNNING':
                res = '拼团中'
                break;
              case 'GROUP_SUCCESS':
                res = '拼团成功'
                break;
              case 'GROUP_FAIL':
                res = '拼团失败'
                break;
              default: 
                res = ''
            }
            return res
          }
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        }
      ]
    };
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    statusChange(e) {
      switch (e.target.value) {
        case 'GROUP_RUNNING':
          this.form.setFieldsValue({
            groupStatus: e.target.value,
            refundStatus: ''
          })
          break;
        case 'GROUP_SUCCESS':
          this.form.setFieldsValue({
            groupStatus: e.target.value,
            refundStatus: ''
          })
          break;
        case 'GROUP_FAIL,2':
          this.form.setFieldsValue({
            groupStatus: 'GROUP_FAIL',
            refundStatus: '2'
          })
          break;
        case 'GROUP_FAIL,0':
          this.form.setFieldsValue({
            groupStatus: 'GROUP_FAIL',
            refundStatus: '0'
          })
          break;
        default:
          this.form.setFieldsValue({
            groupStatus: '',
            refundStatus: ''
          })
          break;
      }
      this.$nextTick(() => {
        this.$refs.searchtable.refreshTable()
      })
      console.log(e.target.value)
    },
    // 获取各类数据个数
    async getItemsLength(){
      const res = await this.$get('')
      this.statusListLength = res.dataInfo
    },
    openInfo(record) {
      this.currentRecord = record;
      this.$router.push({
        name: "OrderGroupBargainingPagesInfo",
        query: {
          id: record.id
        },
      });
    },
  }
};
</script>

<style lang="less" scoped></style>
